<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
	<div class="header_con">
		<div th:replace="header::top1"></div>
	</div>

	<div th:replace="search::top2"></div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/userInfo">· 个人信息</a></li>
				<li><a href="/page/userOrder">· 全部订单</a></li>
				<li><a href="/page/userSite" class="active">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">收货地址
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button type="button" class="layui-btn layui-btn-xs" id="delAddress">删除默认地址</button>
				</h3>

				<div id="shippingList" class="site_con">
					<!--<dl>
						<dt>当前地址：</dt>
						<dd>北京市 海淀区 东北旺西路8号中关村软件园 （李思 收） 182****7528</dd>
					</dl>-->
				</div>

				<h3 class="common_title2">添加地址</h3>
				<div class="site_con">

					<form class="layui-form" action="">
						<div class="form_group">
							<label>收件人：</label>
							<input type="text" name="receiverName" >
						</div>

						<div class="form_group">
							<label>手机号：</label>
							<input type="text" name="receiverPhone" >
						</div>

						<div class="form_group">
							<label>省：</label>
							<input type="text" name="receiverProvince" >
						</div>

						<div class="form_group">
							<label>市：</label>
							<input type="text" name="receiverCity" >
						</div>

						<div class="form_group">
							<label>区/县：</label>
							<input type="text" name="receiverDistrict" >
						</div>
						<!--<div class="form_group">
							<label>省：</label>
							<select id="provinceId" name="receiverProvince" lay-filter="province">
								<option value="">-&#45;&#45;请选择省份-&#45;&#45;</option>
							</select>
						</div>

						<div class="form_group">
							<label>市：</label>
							<select id="cityId" name="receiverCity" lay-filter="city">
								<option value="">-&#45;&#45;请选择城市-&#45;&#45; </option>
							</select>
						</div>

						<div class="form_group">
							<label>区/县：</label>
							<select id="areaId" name="receiverDistrict" lay-filter="area">
								<option value="">-&#45;&#45;请选择区县-&#45;&#45;</option>
							</select>
						</div>-->

						<div class="form_group form_group2">
							<label>详细地址：</label>
							<textarea class="site_area" name="receiverAddress"></textarea>
						</div>
						<input type="submit" name="" value="添加" class="info_submit" lay-submit lay-filter="submit">
					</form>
				</div>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>

	<script th:src="@{/jquery-2.1.4.js}"></script>
	<script th:src="@{/layui/layui.js}"></script>
	<script th:src="@{/mylayer.js}"></script>

	<script>
		layui.use(['form'], function(){
			var form = layui.form;
			//form.render();



			/*$(function () {
				$.post(
					'/user/selectByProvince',
					function (result) {
						console.log(result);
						$(result.data).each(function () {
							$('#provinceId').append('<option value="'+this.id+'">'+this.name+'</option>');
						})
					},
					'json'
				);

				//给省份下拉框绑定change事件
				$('#provinceId').change(function () {
					$.post(
						'/user/selectByCity',
						{'provinceId':$(this).val()},
						function (result) {
							console.log(result);
							//清除原来的数据，如果不清楚每次换省，市的数量都会叠加
							$('#cityId option:not(:first)').remove();
							$(result.data).each(function(){
								$('#cityId').append('<option value="'+this.id+'">'+this.name+'</option>');
							});
						},
						'json'
					);
				});

				//给市区下拉框绑定change事件
				$('#cityId').change(function () {
					$.post(
						'/user/selectByArea',
						{'cityId': $(this).val()},
						function (result) {
							console.log(result);
							//清除原来的数据，如果不清楚每次换省，市的数量都会叠加
							$('#areaId option:not(:first)').remove();
							$(result.data).each(function () {
								$('#areaId').append('<option value="' + this.id + '">' + this.name + '</option>');
							});
						},
						'json'
					);
				});
			});*/

			/*显示地址*/
			$.post(
				'/shipping/list',
				function (result) {
					console.log(result);
					if (result.code == 0) {
						$(result.data).each(function () {
							var html = '';
							html += '<dl id="'+this.id+'" class="check-status">'
							if (this.status == 1){
								html+= '   <dt><input type="radio" class="check ischecked" name="status" checked="">当前地址：</dt>'
							}else{
								html+= '    <dt><input type="radio" class="check" name="status">当前地址：</dt>'
							}
							/*html += '	<dt>当前地址：</dt>'*/
							html += '	<dd>'+this.receiverCity+' | '+this.receiverDistrict+' | '+this.receiverAddress+' | '+this.receiverName+' | '+this.receiverPhone+' </dd>'
							html += '</dl>'
							$('#shippingList').prepend(html); /*prepend：向前追加、append：向后追加*/
						})
					}
				},
				'json'
			);


			//普通勾选
			//事件委托机制
			// .cart_list_td操作的是子类
			$('#shippingList').on('click', '.check', function (){
				var cla=$(this).attr('class');
				var checked;
				if(cla!='check ischecked'){
					$(this).attr('class','check ischecked');
					checked = 1;
				}else{
					$(this).attr('class','check');
					checked = 0;
				}
				var id = $(this).parents('.check-status').attr('id');
				$.post(
					'/shipping/updateStatus',
					{'id': id, 'status': checked},
					function (result) {
						if (result.code == 0) {
							mylayer.okMsg(result.msg);
						}
					},
					'json'
				);
			});

			//删除默认地址
			$('#delAddress').on('click', function (){
				$.post(
					'/shipping/deleteByStatusUserId',
					function (result) {
						console.log(result);
						if (result.code == 0){
							mylayer.okMsg(result.msg)
							window.location.reload();
						}else {
							mylayer.errorMsg(result.msg)
						}
					},
					'json'
				);
			});

			/*$.post(
				'/user/selectByCity',
				{'provinceId':value},
				function (result) {
					console.log(result);
					if (result.code == 0) {
						$('#CityId').empty();//清空
						$(result.data).each(function () {
							$('#CityId').append('<option value="'+this.id+'">'+this.name+'</option>');
						})
						form.render('select');
					}
				},
				'json'
			);

			$.post(
				'/user/selectByProvince',
				function (result) {
					console.log(result);
					if (result.code == 0) {
						$(result.data).each(function () {
							$('#provinceId').append('<option value="'+this.id+'">'+this.name+'</option>');
						})
						form.render('select');
					}
				},
				'json'
			);

			form.on('select(province)', function(data){
				var elem = data.elem; // 获得 select 原始 DOM 对象
				var value = data.value; // 获得被选中的值
				var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
				$.post(
					'/user/selectByArea',
					{'cityId':value},
					function (result) {
						console.log(result);
						if (result.code == 0) {
							$('#AreaId').empty();//清空
							$(result.data).each(function () {
								$('#AreaId').append('<option value="'+this.id+'">'+this.name+'</option>');
							})
							form.render('select');
						}
					},
					'json'
				);
			});*/


			// 添加地址
			form.on('submit(submit)', function (data) {
				var field = data.field; // 获取表单字段值
				console.log(data);
				// 此处可执行 Ajax 等操作
				$.post(
					'/shipping/add',
					field,  //{name: 'zhyangsan', address: 'fdfd', time: 'fd'}
					function (result) {
						console.log(result);
						if (result.code == 0) {
							mylayer.okMsg(result.msg);
							setInterval(function () {
								//刷新页面
								window.location.reload();
							}, 2000)
						} else {
							mylayer.errorMsg(result.msg);
						}
					},
					'json'
				);
				return false; // 阻止默认 form 跳转
			});
		})
	</script>

</body>
</html>